import React from "react";
import '@/style/css/login.css'

// 类型接口
interface BusinessPropType{
    mobile:string,
    password:string
}

const Login = () =>
{
    const [gradient, setGradient] = useState<string>('linear-gradient(to right, #ffffff, #f0f8ff)');

  const currentColors = useRef({

    color1: '#ffffff',

    color2: '#f0f8ff',

    targetColor1: '#ffffff',

    targetColor2: '#f0f8ff'

  });

  const lerpColor = (color1: string, color2: string, amount: number): string => {

    const hexToRgb = (hex: string) => {

      const r = parseInt(hex.slice(1, 3), 16);

      const g = parseInt(hex.slice(3, 5), 16);

      const b = parseInt(hex.slice(5, 7), 16);

      return { r, g, b };

    };

    const rgb1 = hexToRgb(color1);

    const rgb2 = hexToRgb(color2);

    const r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * amount);

    const g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * amount);

    const b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * amount);

    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;

  };

  const generatePastelColor = () => {

    const r = Math.round(Math.random() * 127 + 127);

    const g = Math.round(Math.random() * 127 + 127);

    const b = Math.round(Math.random() * 127 + 127);

    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;

  };

  useEffect(() => {

    let animationFrame: number;

    let startTime1: number;

    let startTime2: number;

    const duration1 = 2000; // 2 seconds for color1

    const duration2 = 3000; // 3 seconds for color2

    const animate = (timestamp: number) => {

      if (!startTime1) startTime1 = timestamp;

      if (!startTime2) startTime2 = timestamp;

      const elapsed1 = timestamp - startTime1;

      const elapsed2 = timestamp - startTime2;

      const progress1 = Math.min(elapsed1 / duration1, 1);

      const progress2 = Math.min(elapsed2 / duration2, 1);

      const newColor1 = lerpColor(currentColors.current.color1, currentColors.current.targetColor1, progress1);

      const newColor2 = lerpColor(currentColors.current.color2, currentColors.current.targetColor2, progress2);

      setGradient(`linear-gradient(to right, ${newColor1}, ${newColor2})`);

      if (progress1 < 1 || progress2 < 1) {

        animationFrame = requestAnimationFrame(animate);

      } else {

        currentColors.current.color1 = currentColors.current.targetColor1;

        currentColors.current.color2 = currentColors.current.targetColor2;

        // Set new target colors

        currentColors.current.targetColor1 = generatePastelColor();

        currentColors.current.targetColor2 = generatePastelColor();

        startTime1 = performance.now();

        startTime2 = performance.now();

        animationFrame = requestAnimationFrame(animate);

      }

    };

    animationFrame = requestAnimationFrame(animate);

    return () => cancelAnimationFrame(animationFrame);

  }, []);

    // 实例表单
    const [ form ] = React.UI.Form.useForm();

    // 状态变量
    const [business] = useState<BusinessPropType>({
        mobile:'13300000000',
        password:'123'
    });

    // 表单提交事件
    const onSubmit = async (values:BusinessPropType) =>
    {
        // 发起请求
        let result = await React.Http.post('/business/login',values);
        
        if(result.code === 1)
        {
            React.toast(result.msg,() => {
                React.Cookies.save('business',result.data,{path:'/'});

                React.navigate(result.url);
            });
        }else{
            React.toast(result.msg,null,'fail');
        }
    }

    return (
        <>

            <div className="login"  style={{

height: '100vh',

backgroundImage: gradient,

transition: 'background-image 1s ease-in-out'

}}>
                <React.UI.Form
                    layout='horizontal'
                    mode='card'
                    footer={
                        <React.UI.Button block type='submit' color='primary' size='large'>
                            注册 / 登录
                        </React.UI.Button>
                    }
                    form={form}
                    onFinish={onSubmit}
                    initialValues={business}
                >
                    <React.UI.Form.Item
                        label='手机号'
                        name='mobile'
                        rules={[
                            { required: true, message: '手机号不能为空' },
                            {
                                pattern: /^1[3456789]\d{9}$/,
                                message: '手机号格式不对',
                            }
                        ]}
                    >
                        <React.UI.Input placeholder='请输入手机号' clearable />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item
                        label='密码'
                        name='password'
                        rules={[
                            { required: true, message: '密码不能为空' }
                        ]}
                    >
                        <React.UI.Input type='password' placeholder='请输入密码' clearable />
                    </React.UI.Form.Item>
                </React.UI.Form>
            </div>
        </>
    )
}

export default Login;